import {defineComponent} from 'vue';
import {useStore} from 'vuex';
import {Dropdown, Menu} from "ant-design-vue";
import {TranslationOutlined} from '@ant-design/icons-vue'
import {useI18n} from "vue-i18n";

export const LanguageChange = defineComponent({
    name: 'LanguageChange',
    components: {
        [Dropdown.name]: Dropdown,
        [Dropdown.Button.name]: Dropdown.Button,
        [Menu.name]: Menu,
        [Menu.Item.name]: Menu.Item,
    },
    setup() {
        let store = useStore(),
            language = store.getters['settings/locale'],
            $t = useI18n().t,
            languages = [
                {
                    code: 'zh-CN',
                    text: 'international.chinese'
                },
                {
                    code: 'zh-TW',
                    text: 'international.traditional'
                },
                {
                    code: 'en',
                    text: 'international.english'
                },
                {
                    code: 'en-US',
                    text: 'international.usa'
                }
            ]
        const changeLang = async ({key}: {key:string, [x: string]: any}) => {
            await store.dispatch('setting/changeLocale', key);
        }
        const slots = {
            overlay: () => (
                <a-menu onClick={changeLang}>
                    {
                        languages.map(e=>{
                            return <a-menu-item key={e.code} disabled={language === e.code}>{$t(e.text)}</a-menu-item>
                        })
                    }
                </a-menu>
            ),
            icon: () => <TranslationOutlined />
        }
        return <a-dropdown-button v-slots={slots} > {$t('international.change')} </a-dropdown-button>
    }
})
